import React from 'react';
import {Button, Card, Form, Select, Modal, Table, message, Input, DatePicker, Radio,} from 'antd';
import axios from './../../axios';
import Utils from './../../utils/utils';
import BaseForm from './../../components/BaseForm';
import ETable from './../../components/ETable';
import Moment from 'moment';

const FormItem = Form.Item;
const Option = Select.Option;
const RadioGroup = Radio.Group;

export default class User extends React.Component {
    params = {
        page: 1
    };

    state = {
        isVisible: false
    };

    formList = [
        {
            type: 'INPUT',
            label: '用户名',
            field: 'user_name',
            width: 250,
            placeholder: '请输入用户名称',
        },
        {
            type: 'INPUT',
            label: '用户手机号',
            width: 250,
            field: 'user_phone',
            placeholder: '请输入手机号',
        },
        {
            type: 'DATE',
            label: '请选择入职日期',
            field: 'user_date',
            width: 250,
            placeholder: '请输入日期',
        },
    ];


    componentDidMount() {
        this.requestList()
    }

// /筛选框查询
    filterSearch = (params) => {
        this.params = params;
        this.requestList();

    };

    requestList = () => {
        axios.requestList('/user/list', this.params, this)

    };

    //处理各类请求
    handleOperate = (type) => {
        let item = this.state.selectedItem;
        let selectedRowKeys = this.state.selectedRowKeys;

        if (type === 'create') {
            this.setState({
                type,
                isVisible: true,
                title: '新建员工'
            })

        } else if (type === 'edit') {
            if (!item) {
                Modal.info({
                    title: '提示',
                    content: '请选择一条记录'
                })
                return;
            }
            this.setState({
                type,
                isVisible: true,
                title: '编辑员工',
                userInfo: item
            })


        } else if (type === 'detail') {
            if (!item) {
                Modal.info({
                    title: '提示',
                    content: '请选择一条记录'
                })
                return;
            }
            this.setState({
                type,
                isVisible: true,
                title: '员工详情',
                userInfo: item
            })

        } else if (type === 'delete') {
            if (!item) {
                Modal.info({
                    title: '提示',
                    content: '请选择一条记录'
                })
                return;
            }
            Modal.confirm({
                title: '确认删除',
                onOk: () => {
                    axios.ajax({
                        url: '/user/delete',
                        data: {
                            params: {
                                id: item.id
                            }
                        }
                    }).then((res) => {
                        if (res.code == '0') {
                            this.setState({
                                isVisible: false,
                                selectedRowKeys:''

                            });
                            this.requestList();
                        }
                    })
                }
            })


        }

    };


    //提交保存
    handleSubmit = () => {
        let type = this.state.type;
        let data = this.userForm.props.form.getFieldsValue();
        axios.ajax({
            url: type === 'create' ? '/user/add' : '/user/edit',
            data: {
                params:{
                    ...data
                }
            }
        }).then((res) => {
            if (res.code == '0') {
                // this.userForm.props.form.resetFields();
                this.setState({
                    isVisible:false
                });
                this.requestList();
            }

        })

    };

    render() {

        const columns = [
            {
                title: 'id',
                dataIndex: 'id'
            }, {
                title: '用户名',
                dataIndex: 'userName'
            }, {
                title: '性别',
                dataIndex: 'sex',
                render(sex) {
                    return sex == 1 ? '男' : '女'
                }
            }, {
                title: '状态',
                dataIndex: 'state',
                render(state) {
                    let config = {
                        '1': '咸鱼一条',
                        '2': '风华浪子',
                        '3': '北大才子一枚',
                        '4': '百度FE',
                        '5': '创业者'
                    }
                    return config[state];
                }
            }, {
                title: '爱好',
                dataIndex: 'interest',
                render(interest) {
                    let config = {
                        '1': '游泳',
                        '2': '打篮球',
                        '3': '踢足球',
                        '4': '跑步',
                        '5': '爬山',
                        '6': '骑行',
                        '7': '桌球',
                        '8': '麦霸'
                    }
                    return config[interest];
                }
            }, {
                title: '爱好',
                dataIndex: 'isMarried',
                render(isMarried) {
                    return isMarried ? '已婚' : '未婚'
                }
            }, {
                title: '生日',
                dataIndex: 'birthday'
            }, {
                title: '联系地址',
                dataIndex: 'address'
            }, {
                title: '早起时间',
                dataIndex: 'time'
            }
        ];
        //动态控制foot显示与否
        let footer = {}
        if (this.state.type === 'detail') {
            footer = {
                footer: null
            }
        }
        return (
            <div>
                <Card>
                    <BaseForm formList={this.formList} filterSearch={this.filterSearch}/>
                </Card>
                <Card style={{marginTop: 10}}>
                    <Button type="primary" icon="plus" onClick={() => this.handleOperate('create')}>创建员工</Button>
                    <Button type="primary" icon="edit" style={{marginLeft: 20}}
                            onClick={() => this.handleOperate('edit')}>编辑员工</Button>
                    <Button type="primary" style={{marginLeft: 20}}
                            onClick={() => this.handleOperate('detail')}>员工详情</Button>
                    <Button type="primary" icon="delete" style={{marginLeft: 20}}
                            onClick={() => this.handleOperate('delete')}>删除员工</Button>
                </Card>
                <div className="content-wrap">

                    <ETable
                        updateSelectedItem={Utils.updateSelectedItem.bind(this)}
                        columns={columns}
                        rowSelection='radio'
                        dataSource={this.state.list}
                        pagination={this.state.pagination}
                        selectedRowKeys={this.state.selectRowKeys}
                        selectedIds={this.state.selectedIds}
                        selectedItem={this.state.selectedItem}

                    />
                </div>
                <Modal
                    title={this.state.title}
                    onOk={this.handleSubmit}
                    visible={this.state.isVisible}
                    onCancel={() => {
                        this.userForm.props.form.resetFields();
                        this.setState({
                            isVisible: false
                        })
                    }}
                    width={600}
                    {...footer}
                >
                    <UserForm
                        //父组件给子组件传参

                        type={this.state.type}
                        userInfo={this.state.userInfo}
                        wrappedComponentRef={(inst) => {
                            //获取到表单输入的信息：cityForm命名可以随便，这样访问props：this.cityForm.props
                            this.userForm = inst
                        }}/>

                </Modal>

            </div>
        );
    }


}


class UserForm extends React.Component {

    getState = (state) => {
        return {
            '1': '咸鱼一条',
            '2': '风华浪子',
            '3': '北大才子一枚',
            '4': '百度FE',
            '5': '创业者'
        }[state]
    }

    render() {


        const type = this.props.type;
        const userInfo = this.props.userInfo || {};
        const {getFieldDecorator} = this.props.form;

        const formItemLayout = {
            labelCol: {
                span: 5

            },
            wrapperCol: {
                span: 15
            }
        };


        return (
            <div>
                <Form layout="horizontal">
                    <FormItem label="姓名" {...formItemLayout}>
                        {
                            userInfo && type == 'detail' ? userInfo.userName :
                                getFieldDecorator('user_name', {
                                    initialValue: userInfo.userName
                                })(
                                    <Input type="text" placeholder="请输入姓名"/>
                                )
                        }
                    </FormItem>
                    <FormItem label="性别" {...formItemLayout}>
                        {
                            userInfo && type == 'detail' ? userInfo.sex == 1 ? '男' : '女' :
                                getFieldDecorator('sex', {
                                    initialValue: userInfo.sex
                                })(
                                    <RadioGroup>
                                        <Radio value={1}>男</Radio>
                                        <Radio value={2}>女</Radio>
                                    </RadioGroup>
                                )}
                    </FormItem>
                    <FormItem label="状态" {...formItemLayout}>
                        {
                            userInfo && type == 'detail' ? this.getState(userInfo.state) :
                                getFieldDecorator('state', {
                                    initialValue: userInfo.state
                                })(
                                    <Select>
                                        <Option value={1}>咸鱼一条</Option>
                                        <Option value={2}>风华浪子</Option>
                                        <Option value={3}>北大才子一枚</Option>
                                        <Option value={4}>百度FE</Option>
                                        <Option value={5}>创业者</Option>
                                    </Select>
                                )}
                    </FormItem>
                    <FormItem label="生日" {...formItemLayout}>
                        {
                            userInfo && type == 'detail' ? userInfo.birthday :
                                getFieldDecorator('birthday', {
                                    initialValue: Moment(userInfo.birthday)
                                })(
                                    <DatePicker/>
                                )}
                    </FormItem>
                    <FormItem label="联系地址" {...formItemLayout}>
                        {
                            userInfo && type == 'detail' ? userInfo.address :
                                getFieldDecorator('address', {
                                    initialValue: userInfo.address
                                })(
                                    <Input.TextArea rows={3} placeholder="请输入联系地址"/>
                                )}
                    </FormItem>
                </Form>
            </div>
        );
    }


}

UserForm = Form.create()(UserForm);


